<template>
  <view class="project-detail">
    <!-- 项目介绍 -->
    <view class="intro-section">
      <image :src="project.image" mode="aspectFill" class="cover-image" />
      <view class="info-card">
        <text class="name">{{ project.name }}</text>
        <text class="price">¥{{ project.price }}起</text>
        <view class="tags">
          <text v-for="(tag, index) in project.tags" :key="index">{{ tag }}</text>
        </view>
      </view>
    </view>
    
    <!-- 适应症状 -->
    <view class="section-card">
      <view class="section-title">适应症状</view>
      <view class="symptom-list">
        <view 
          class="symptom-item"
          v-for="(item, index) in project.symptoms"
          :key="index"
        >
          <text class="dot"></text>
          <text class="content">{{ item }}</text>
        </view>
      </view>
    </view>
    
    <!-- 治疗方案 -->
    <view class="section-card">
      <view class="section-title">治疗方案</view>
      <rich-text :nodes="project.treatment"></rich-text>
      <view class="image-list" v-if="project.treatmentImages?.length">
        <image 
          v-for="(image, index) in project.treatmentImages"
          :key="index"
          :src="image"
          mode="aspectFill"
          @tap="previewImage(index, 'treatment')"
        />
      </view>
    </view>
    
    <!-- 治疗效果 -->
    <view class="section-card">
      <view class="section-title">治疗效果</view>
      <rich-text :nodes="project.effect"></rich-text>
      <view class="image-list" v-if="project.effectImages?.length">
        <image 
          v-for="(image, index) in project.effectImages"
          :key="index"
          :src="image"
          mode="aspectFill"
          @tap="previewImage(index, 'effect')"
        />
      </view>
    </view>
    
    <!-- 注意事项 -->
    <view class="section-card">
      <view class="section-title">注意事项</view>
      <view class="notice-list">
        <view 
          class="notice-item"
          v-for="(item, index) in project.notices"
          :key="index"
        >
          <text class="dot"></text>
          <text class="content">{{ item }}</text>
        </view>
      </view>
    </view>
    
    <!-- 推荐医生 -->
    <view class="section-card">
      <view class="section-header">
        <text class="title">推荐医生</text>
        <text class="more">查看全部</text>
      </view>
      <scroll-view 
        scroll-x 
        class="doctor-list"
        :show-scrollbar="false"
      >
        <view 
          class="doctor-item"
          v-for="(item, index) in project.doctors"
          :key="index"
          @tap="viewDoctor(item)"
        >
          <image :src="item.avatar" mode="aspectFill" class="avatar" />
          <text class="name">{{ item.name }}</text>
          <text class="title">{{ item.title }}</text>
          <text class="specialty">{{ item.specialty }}</text>
        </view>
      </scroll-view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <button class="action-btn outline" @tap="showConsult">在线咨询</button>
      <button class="action-btn primary" @tap="makeAppointment">立即预约</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 项目详情
const project = ref({
  id: 1,
  name: '针灸治疗',
  price: 300,
  image: '/static/tcm/acupuncture.jpg',
  tags: ['专家门诊', '中医特色', '无痛治疗'],
  symptoms: [
    '颈椎病、腰椎病等脊椎疾病',
    '肩周炎、网球肘等关节疾病',
    '偏头痛、失眠等神经系统疾病',
    '胃痛、便秘等消化系统疾病'
  ],
  treatment: `
    <p style="text-indent: 2em; margin-bottom: 1em;">针灸治疗采用传统中医理论，通过刺激人体特定穴位，达到调节阴阳、疏通经络的目的。</p>
    <p style="text-indent: 2em; margin-bottom: 1em;">治疗过程中，医生会根据患者具体情况，选择合适的穴位和针刺手法，一般每次治疗约30-40分钟。</p>
  `,
  treatmentImages: [
    '/static/tcm/treatment1.jpg',
    '/static/tcm/treatment2.jpg'
  ],
  effect: `
    <p style="text-indent: 2em; margin-bottom: 1em;">针灸治疗具有显著的止痛效果，可以改善局部血液循环，促进炎症吸收，加快康复进程。</p>
    <p style="text-indent: 2em; margin-bottom: 1em;">一般需要进行多次治疗，大约6-10次为一个疗程，多数患者在3-5次治疗后即可感受到明显改善。</p>
  `,
  effectImages: [
    '/static/tcm/effect1.jpg',
    '/static/tcm/effect2.jpg'
  ],
  notices: [
    '治疗前2小时内避免空腹或过饱',
    '治疗当天避免剧烈运动',
    '保持穴位局部清洁',
    '如有出血性疾病请提前告知医生'
  ],
  doctors: [
    {
      id: 1,
      name: '张医生',
      title: '主任医师',
      specialty: '针灸推拿',
      avatar: '/static/doctor/tcm1.jpg'
    },
    {
      id: 2,
      name: '李医生',
      title: '副主任医师',
      specialty: '中药调理',
      avatar: '/static/doctor/tcm2.jpg'
    }
  ]
})

// 预览图片
const previewImage = (index, type) => {
  const images = type === 'treatment' ? project.value.treatmentImages : project.value.effectImages
  uni.previewImage({
    urls: images,
    current: index
  })
}

// 查看医生详情
const viewDoctor = (doctor) => {
  uni.navigateTo({
    url: `/pages/doctor/detail?id=${doctor.id}`
  })
}

// 在线咨询
const showConsult = () => {
  uni.showModal({
    title: '提示',
    content: '是否开始在线咨询？',
    success: (res) => {
      if (res.confirm) {
        // 这里处理在线咨询逻辑
      }
    }
  })
}

// 立即预约
const makeAppointment = () => {
  uni.navigateTo({
    url: `/pages/appointment/department?type=tcm&project=${project.value.id}`
  })
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const { id } = page.$page?.options || {}
  
  // 这里根据ID加载项目详情
  console.log('加载项目详情:', id)
})
</script>

<style lang="scss">
.project-detail {
  min-height: 100vh;
  background: $bg-color;
  padding-bottom: 120rpx;
  
  .intro-section {
    position: relative;
    
    .cover-image {
      width: 100%;
      height: 400rpx;
    }
    
    .info-card {
      position: relative;
      margin: -60rpx 30rpx 0;
      padding: 30rpx;
      background: #fff;
      border-radius: $radius-lg;
      box-shadow: $shadow-lg;
      
      .name {
        font-size: 36rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 12rpx;
        display: block;
      }
      
      .price {
        font-size: 32rpx;
        color: $warning;
        font-weight: bold;
        margin-bottom: 16rpx;
        display: block;
      }
      
      .tags {
        text {
          display: inline-block;
          font-size: 24rpx;
          color: $primary-color;
          background: $primary-light;
          padding: 4rpx 16rpx;
          border-radius: $radius-sm;
          margin-right: 16rpx;
        }
      }
    }
  }
  
  .section-card {
    background: #fff;
    margin: 20rpx 30rpx;
    padding: 30rpx;
    border-radius: $radius-lg;
    
    .section-title {
      font-size: 32rpx;
      color: $text-primary;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
      }
      
      .more {
        font-size: 28rpx;
        color: $text-secondary;
      }
    }
    
    rich-text {
      font-size: 28rpx;
      color: $text-regular;
      line-height: 1.8;
    }
    
    .image-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20rpx;
      margin-top: 20rpx;
      
      image {
        width: 100%;
        height: 200rpx;
        border-radius: $radius-lg;
      }
    }
    
    .symptom-list,
    .notice-list {
      .symptom-item,
      .notice-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .dot {
          width: 12rpx;
          height: 12rpx;
          background: $primary-color;
          border-radius: 50%;
          margin-top: 12rpx;
          margin-right: 12rpx;
          flex-shrink: 0;
        }
        
        .content {
          flex: 1;
          font-size: 28rpx;
          color: $text-regular;
          line-height: 1.6;
        }
      }
    }
    
    .doctor-list {
      white-space: nowrap;
      
      .doctor-item {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        width: 200rpx;
        margin-right: 30rpx;
        
        &:last-child {
          margin-right: 0;
        }
        
        .avatar {
          width: 160rpx;
          height: 160rpx;
          border-radius: 50%;
          margin-bottom: 16rpx;
        }
        
        .name {
          font-size: 30rpx;
          color: $text-primary;
          font-weight: bold;
          margin-bottom: 8rpx;
        }
        
        .title {
          font-size: 26rpx;
          color: $text-regular;
          margin-bottom: 8rpx;
        }
        
        .specialty {
          font-size: 24rpx;
          color: $text-secondary;
        }
        
        &:active {
          opacity: 0.8;
        }
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: $shadow-lg;
    display: flex;
    gap: 20rpx;
    
    .action-btn {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
      font-size: 30rpx;
      border-radius: $radius-xl;
      
      &.outline {
        color: $primary-color;
        background: #fff;
        border: 2rpx solid $primary-color;
      }
      
      &.primary {
        color: #fff;
        background: $primary-gradient;
      }
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
}
</style> 